#loading-logo {
  left: 38%;
  top: 47%;
  position: absolute;
  .uil-ripple {
    position: absolute;
    left: calc(50% - 90px);
    top: calc(50% - 90px);
    opacity: .5;
    z-index: 999
  }

  .ld-l {
    opacity: 0;
    animation: ld-in 3s 0.0s ease infinite;
  }

  .ld-o {
    opacity: 0;
    animation: ld-in 3s 0.1s ease infinite;
  }

  .ld-a {
    opacity: 0;
    animation: ld-in 3s 0.2s ease infinite;
  }

  .ld-d {
    opacity: 0;
    animation: ld-in 3s 0.3s ease infinite;
  }

  .ld-i {
    opacity: 0;
    animation: ld-in 3s 0.4s ease infinite;
  }

  .ld-n {
    opacity: 0;
    animation: ld-in 3s 0.5s ease infinite;
  }

  .ld-g {
    opacity: 0;
    animation: ld-in 3s 0.6s ease infinite;
  }

  @keyframes ld-in {
    0% {
      opacity: 0;
      transform: scale(0);
    }
    30% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
}
#circular {
  width: 42px;
  height: 42px;
  left: 30%;
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  animation: loading-rotate 2s linear infinite;
  .load-circle {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: #20a0ff;
    fill: transparent;
    stroke-linecap: round;
  }
  @keyframes loading-dash {

    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -40px;
    }
    100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -120px;
    }
  }

  @keyframes loading-rotate {
    100% {
      transform: rotate(1turn);
    }
  }
}